<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index-首页.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
</head>
<body>
    <!-- 外延 -->
    <div class="extension1">
        <!-- 版心 -->
        <div class="banner-header">
            <div class="banner-header-left">
                <a href="">欢太品牌</a>
                <a href="">欢太云服务</a>
                <a href="">软件商店</a>
                <a href="">健康</a>
            </div>
            <div class="banner-header-right">
                <a href="">下载欢太商城APP</a>
                <a href="../html/login2-登录.html">登录</a>
                <a href="../html/reg-注册.html">注册</a>
                <a href="">购物车</a>      
            </div>
        </div>


    <!-- 外延 -->
    <div class="extension2">
        <!-- 版心 -->
        <div class="banner-header2">
            <div class="banner-header2-left"><img src="../img/logo.png" alt=""></div>
            <div class="banner-header2-middle">
                <a href="">OPPO专区</a>
                <a href="">OnePLus专区</a>
                <a href="">realme专区</a>
                <a href="">智能生活</a>
                <a href="">潮流好物</a>
                <a href="">服务</a>
            </div>
            <div class="banner-header2-right"><span>OPPO Reno6</span></div>
        </div>
    </div>
</div>



    <!-- 轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../img/lunbo1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="../img/lunbo2.png" alt=""></div>
          <div class="swiper-slide"><img src="../img/lunbo3.jpg" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    
      <script src="../js/swiper-bundle.min.js"></script>
      <script>
        var swiper = new Swiper('.swiper-container', {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      </script>


<div class="extension3">
    <div class="banner-body1">
        <div class="banner-body2">
            <div class="banner-body3">
                <a href="./product-商品详情页.html">
                    <div class="banner-body4">
                        <dl>
                            <dt><img src="../img/tupain3.jpg" alt=""></dt>
                            <dd>OPPO Find X3 Pro</dd>
                            <dd>双&nbsp;&nbsp;5000&nbsp;&nbsp;万旗舰主摄像头</dd>
                        </dl>
                    </div>
                </a>
            </div>
            <div class="banner-body5">
                <div class="banner-body6">
                    <img src="../img/body-2.png" alt="">
                    <p>领券中心</p>
                </div>
                <div class="banner-body6">
                    <img src="../img/body-2.png" alt="">
                    <p>领券中心</p>
                </div>
                <div class="banner-body6">
                    <img src="../img/body-2.png" alt="">
                    <p>领券中心</p>
                </div>
                <div class="banner-body6">
                    <img src="../img/body-2.png" alt="">
                    <p>领券中心</p>
                </div>
            </div>


            <div class="banner-body7">
                <div class="banner-body7-img">
                <img src="../img/tupian2.jpg" alt="">
            </div>
            <div class="banner-body7-text">
                <a href="../html/login2-登录.html"><span>请</span>&nbsp;&nbsp;登录&nbsp;|
                    <a href="../html/reg-注册.html">注册</a>
                </a>
                <p>立即注册领取新人福利</p>
            </div>        
            </div>
        </div>


        <div class="banner-body8">OnePlus专区</div>
        <div class="banner-body9">
            <ul>
                <li>OnePlus 9系列</li>
                <li>OnePlus 8系列</li>
                <li>OnePlus Watch</li>
                <li>OnePlus 配件</li>
            </ul>
        </div>

        <div class="banner-body16">
                <div class="banner-body10" style="display: block;">
                                <a href="">
                                    <div class="banner-body11">
                                        <img src="https://dsfs.oppo.com/archives/202107/2021070605072360e41be3706a3.jpg?_w_=1028&_h_=604" alt="">
                                        <dl>
                                            <dt>Reno6</dt>
                                            <dd>345</dd>
                                        </dl>
                                    </div>
                                </a>
                                
                                
                                <a href="">
                                    <div class="banner-body12">
                                        <img src="../img/body-1.jpg" alt="">
                                        <p>Oneplus 9 Pro</p>
                                        <h1>￥4999</h1>
                                    </div>
                                </a>
                                
                                <a href="">
                                    <div class="banner-body12">
                                        <img src="../img/body-1.jpg" alt="">
                                        <p>OnePlus 9</p>
                                        <h1>￥3599</h1>
                                    </div>
                                </a>
                                
                                <a href="">
                                    <div class="banner-body12">
                                        <img src="../img/body-1.jpg" alt="">
                                        <p>Oneplus 9R</p>
                                        <h1>￥3299</h1>
                                    </div>
                                </a>
                                    </div>

                <!-- <div class="banner-body10" style="display: none;">
                                <a href="">
                                    <div class="banner-body11">
                                        <img src="https://dsfs.oppo.com/archives/202107/2021070605072360e41be3706a3.jpg?_w_=1028&_h_=604" alt="">
                                    </div>
                                </a>
                    
                    
                                <a href="">
                                    <div class="banner-body12">
                                        <img src="../img/tupian9.jpg" alt="">
                                        <p>Oneplus 9 Pro</p>
                                        <h1>￥4999</h1>
                                    </div>
                                </a>
                    
                                <a href="">
                                    <div class="banner-body12">
                                        <img src="../img/tupian9.jpg" alt="">
                                        <p>OnePlus 9</p>
                                        <h1>￥3599</h1>
                                    </div>
                                </a>
                    
                                <a href="">
                                    <div class="banner-body12">
                                        <img src="../img/tupian9.jpg" alt="">
                                        <p>Oneplus 9R</p>
                                        <h1>￥3299</h1>
                                    </div>
                                </a>

                </div> -->


                <!-- <div class="banner-body10" style="display: none;">
                    <a href="">
                        <div class="banner-body11">
                            <img src="https://dsfs.oppo.com/archives/202107/2021070605072360e41be3706a3.jpg?_w_=1028&_h_=604" alt="">
                        </div>
                    </a>
        
        
                    <a href="">
                        <div class="banner-body12">
                            <img src="../img/tupian8.jpg" alt="">
                            <p>Oneplus 9 Pro</p>
                            <h1>￥4999</h1>
                        </div>
                    </a>
        
                    <a href="">
                        <div class="banner-body12">
                            <img src="../img/tupian8.jpg" alt="">
                            <p>OnePlus 9</p>
                            <h1>￥3599</h1>
                        </div>
                    </a>
        
                    <a href="">
                        <div class="banner-body12">
                            <img src="../img/tupian8.jpg" alt="">
                            <p>Oneplus 9R</p>
                            <h1>￥3299</h1>
                        </div>
                    </a>
            </div> -->

            <!-- <div class="banner-body10" style="display: none;">
                <a href="">
                    <div class="banner-body11">
                        <img src="https://dsfs.oppo.com/archives/202107/2021070605072360e41be3706a3.jpg?_w_=1028&_h_=604" alt="">
                    </div>
                </a>
    
    
                <a href="">
                    <div class="banner-body12">
                        <img src="../img/tupian7.jpg" alt="">
                        <p>Oneplus 9 Pro</p>
                        <h1>￥4999</h1>
                    </div>
                </a>
    
                <a href="">
                    <div class="banner-body12">
                        <img src="../img/tupian7.jpg" alt="">
                        <p>OnePlus 9</p>
                        <h1>￥3599</h1>
                    </div>
                </a>
    
                <a href="">
                    <div class="banner-body12">
                        <img src="../img/tupian7.jpg" alt="">
                        <p>Oneplus 9R</p>
                        <h1>￥3299</h1>
                    </div>
                </a>

            </div> -->

        </div>
    </div>

</div>
<script src="../js/index.js"></script>
<script src="../js/Tabs.js"></script>
</body>
</html>